﻿import React, { Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import actionsC from '@/store/actions.js';
import * as utils from '@/utils/index.js'
import { getCurrentNode, getCurrentPath } from '@/store/selectors'
import config from '@/config'
import camelcase from 'camelcase'
import { observer, inject } from 'mobx-react'

const {clsPrefix} = config

@inject('rootStore')
@observer
class Slot extends Component {
	constructor(props) {
		super(props);
		const {children,path,tag,text,attr,styles, selector} = this.props
		this.state={
			// children:children,
			// path:path,
			// tag:tag,
			// text:text,
			// attr:attr,
			// styles:styles,
			resizing:false,
			// selector: selector
		}
	}
	setActive(e){
		const {rootStore,path,tag,} = this.props
		const {operationMode} = rootStore;
		if(operationMode!='select')return
		var dom=this.refs.TheSlot;
		rootStore.updateCurrentPath(path)
		if(rootStore.currentPath.join(',') == path.join(',') && tag!='text'){
			rootStore.setCurrentDom(dom)
		}
		e.stopPropagation()
	}
	componentDidMount(){
		const {path,tag, rootStore} = this.props
		const {currentPath} = rootStore
		if(tag=='text')return
		var dom=this.refs.TheSlot;
		if(currentPath.join(',') == path.join(',')){
			rootStore.setCurrentDom(dom)
		}
	}
	render() {
		const {children,path,tag,text,attr,styles, selector, isRoot, rootStore}=this.props;
		const {operationMode, currentPath, exportStatus} = rootStore
		const _class = _.isArray(attr.class) ? attr.class : []

		let isActive = currentPath.join(',') == path.join(',')

		let __styles = {}
		for(let prop in styles){
			__styles[camelcase(prop)] = styles[prop]
		}

		let _styles = selector.length>0 && exportStatus ? {} : __styles
		let slot_class = (exportStatus && !isRoot) ? _class.join(' ') : classnames(_class.join(' '),`${clsPrefix}slot`,{active: isActive}) 
		
		let Tag = tag

		switch (tag) {
			case 'text':
				return text
			case 'img':
				return (
					<img
						className={slot_class}
						src={attr.src}
						onClick={this.setActive.bind(this)}
						ref="TheSlot"
						style={_styles} 
				    />
				)
				break;
			default:
				return (
					<Tag className={slot_class}
					onClick={this.setActive.bind(this)}
					ref="TheSlot"
					style={_styles}>
						{utils.render_list(children,(item,index)=> {
							var _path=_.clone(path)
							_path.push(index)
							return(
								<Slot
									rootStore={rootStore}
									exportStatus={exportStatus}
									selector={item.selector}
									text={item.text}
									currentPath={currentPath}
									operationMode={operationMode}
									children={item.children}
									path={_path}
									key={index}
									tag={item.tag}
									attr={item.attr}
									styles={item.styles}
									sClass={item.class}
								/>
							)
						})}
					</Tag>
				)
				break;
		}
	}
}
Slot.defaultProps = {
	text: "I'm text",
	children:[],
	attr:{},
	styles:{},
	isActive:false,
	selector: []
};

export default Slot